<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!-- Header -->
<header data-am-widget="header"
	class="am-header am-header-default am-header-fixed">
	<div class="am-header-left am-header-nav"></div>
	<h1 class="am-header-title">秀套网</h1>
	<div class="am-header-right am-header-nav">
		<a id="searchIcon" href="javascript:void(0)"
			data-am-collapse="{target: '#orderSearchForm'}"> <i
			class="am-header-icon am-icon-search"></i>
		</a>
	</div>
</header>

<!-- search dox -->
<form id="orderSearchForm" class="am-form my-form am-collapse">
	<div class="am-form-group am-alert am-alert-danger am-hide"
		id="date-alert">
		<p>开始日期应小于结束日期！</p>
	</div>
	<div class="am-form-group">
		<div id="startDate" class="am-input-group am-datepicker-date">
			<input type="text" class="am-form-field" placeholder="开始日期" readonly>
			<span class="am-input-group-btn am-datepicker-add-on">
				<button class="am-btn am-btn-default" type="button">
					<span class="am-icon-calendar"></span>
				</button>
			</span>
		</div>
	</div>
	<div class="am-form-group">
		<div id="endDate" class="am-input-group am-datepicker-date">
			<input type="text" class="am-form-field" placeholder="截至日期" readonly>
			<span class="am-input-group-btn am-datepicker-add-on">
				<button class="am-btn am-btn-default" type="button">
					<span class="am-icon-calendar"></span>
				</button>
			</span>
		</div>
	</div>
	<div class="am-form-group">
		<button id="queryBtn" type="button"
			class="am-btn am-btn-success am-btn-block">查询</button>
	</div>
</form>

<div style="height: 15px"></div>

<div class="main-content">

	<c:forEach items="${orders}" var="order" varStatus="vs">
		<div id="collapse-panel" class="am-panel am-panel-danger" style="font-size:13px">
			<div class="am-panel-hd" data-am-collapse="{target: '#panel${vs.index}'}" style="cursor: pointer">
				订单#${order.orderNo}<span class="am-fr"><fmt:formatDate
						value="${order.createdAt}" pattern="yyyy-MM-dd" /></span>
			</div>
			<div id="panel${vs.index}" class="am-panel-bd am-collapse am-in">
				<ul class="am-list am-list-static">
					<li>车主姓名: <span class="am-fr order-value">${order.vehicleOwnerName}</span></li>
					<li>车主手机: <span class="am-fr order-value">${order.mobile}</span></li>
					<li>车型编号: <span class="am-fr order-value">${order.carTypeCode}</span></li>
					<li>产品名称: <span class="am-fr order-value">${order.productName}</span></li>
					<li>颜色: <span class="am-fr order-value">${order.productColour}</span></li>
					<c:if test="${order.footCode!=null}">
						<li>脚垫编号: <span class="am-fr order-value">${order.footCode}</span></li>
					</c:if>
					<c:if test="${order.tailCode!=null}">
						<li>尾箱垫编号: <span class="am-fr order-value">${order.tailCode}</span></li>
					</c:if>
					<li>备注: <br /> <span class="order-value">${order.descrn}</span></li>
					<li class="copyLi"><a data="${order.orderNo}" href="javascript:void(0)" class="am-icon-clipboard am-fr copy">复制订单</a></li>
				</ul>
			</div>
		</div>
	</c:forEach>
</div>

<script src="assets/js/mobile/dateformat.js"></script>
<script src="assets/vendor/jquery-zclip/jquery.zclip.min.js"></script>
<script type="text/javascript">

	var orderList = '${ordersJson}';
	var orderList = jQuery.parseJSON(orderList);
	$(function() {
		var $alert = $('#date-alert');
		var nowTemp = new Date();
		var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp
				.getDate(), 0, 0, 0, 0);
		$('#startDate').datepicker({
			format : 'yyyy-mm-dd',
			onRender : function(date) {
				return date.valueOf() > now.valueOf() ? 'am-disabled' : '';
			}
		}).on('changeDate.datepicker.amui', function(event) {
			var endDateStr = $('#endDate').data('date');
			if (isNotEmpty(endDateStr)) {
				var endDate = new Date(endDateStr.replace(/-/g, "/"));
				if (event.date.valueOf() > endDate.valueOf()) {
					$alert.find('p').text('开始日期应小于结束日期！');
					$alert.removeClass('am-hide');
				} else {
					$alert.addClass('am-hide');
				}
			}

			$(this).datepicker('close');
		});

		$('#endDate').datepicker({
			format : 'yyyy-mm-dd',
			onRender : function(date) {
				return date.valueOf() > now.valueOf() ? 'am-disabled' : '';
			}
		}).on('changeDate.datepicker.amui', function(event) {
			var startDateStr = $('#startDate').data('date');
			if (isNotEmpty(startDateStr)) {
				var startDate = new Date(startDateStr.replace(/-/g, "/"));
				if (event.date.valueOf() < startDate.valueOf()) {
					$alert.find('p').text('开始日期应小于结束日期！');
					$alert.removeClass('am-hide');
				} else {
					$alert.addClass('am-hide');
				}
			}
			$(this).datepicker('close');
		});
		$('#queryBtn').click(function() {
			if ($('#date-alert').hasClass('am-hide')) {
				$.post('mobile/findOrders', {
					startDate : $('#startDate').data('date'),
					endDate : $('#endDate').data('date')
				}, function(result) {
					if (result.code == 'ACK') {
						if (result.message == 'errorMsg') {
							showAlert(result.data);
						} else {
							$mainContent = $('.main-content');
							$mainContent.empty();
							var dateFormat = new DateFormat();
							orderList = result.data;
							$.each(result.data, function(i, order) {
								var fragment = '<div id="collapse-panel" class="am-panel am-panel-danger" style="font-size:13px">'
								+'<div class="am-panel-hd" data-am-collapse="{target: \'#panel'+i+'\'}" style="cursor: pointer">'
								+'订单#'+order.orderNo+'<span class="am-fr">'+dateFormat.format(dateFormat.parseDate(order.createdAt,'yy-MM-dd HH:mm:ss'),'yyyy-MM-dd')+'</span></div>'
								+'<div id="panel'+i+'" class="am-panel-bd am-collapse am-in">'
								+'<ul class="am-list am-list-static">'
								+'<li>车主姓名: <span class="am-fr order-value">'+nullConvert(order.vehicleOwnerName)+'</span></li>'
								+'<li>车主手机: <span class="am-fr order-value">'+nullConvert(order.mobile)+'</span></li>'
								+'<li>车型编号: <span class="am-fr order-value">'+nullConvert(order.carTypeCode)+'</span></li>'
								+'<li>产品名称: <span class="am-fr order-value">'+nullConvert(order.productName)+'</span></li>'
								+'<li>颜色: <span class="am-fr order-value">'+nullConvert(order.productColour)+'</span></li>';
								
								if(order.footCode!=null){
									fragment+='<li>脚垫编号: <span class="am-fr order-value">'+order.footCode+'</span></li>';
								}else if(order.tailCode!=null){
									fragment+='<li>尾箱垫编号: <span class="am-fr order-value">'+order.tailCode+'</span></li>'
								}
								fragment+='<li>备注: <br /> <span class="order-value">'+nullConvert(order.descrn)+'</span></li>'
								+'<li class="copyLi"><a data="'+order.orderNo+'" href="javascript:void(0)" class="am-icon-clipboard am-fr copy">复制订单</a></li>'
								+'</ul></div></div>'
								$mainContent.append(fragment);
							}); 
							bindCopy();
						}
					}
				}, 'json');
			}
		});
		
		bindCopy();

	});
	
	function bindCopy() {
		var userAgent = navigator.userAgent;
		if (userAgent.indexOf("Safari") > -1) {
			$('.copyLi').addClass('am-hide');
		} else {
			$('.copy').zclip({
				path : 'assets/vendor/jquery-zclip/ZeroClipboard.swf',
				copy : function() {
					var copyText = "";
					var orderNo = $(this).attr("data");
					var dateFormat = new DateFormat();
					$.each(orderList, function(i, order) {
						if(order.orderNo == orderNo){
							copyText = "订单编号："+order.orderNo
							+"\n订单日期："+dateFormat.format(dateFormat.parseDate(order.createdAt,'yy-MM-dd HH:mm:ss'),'yyyy-MM-dd')
							+"\n车主姓名："+nullConvert(order.vehicleOwnerName)
							+"\n车主手机："+nullConvert(order.mobile)
							+"\n车型编号："+nullConvert(order.carTypeCode)
							+"\n产品名称："+nullConvert(order.productName)
							+"\n颜色："+nullConvert(order.productColour);
							if(order.footCode!=null){
								copyText+='\n脚垫编号: '+order.footCode;
							}else if(order.tailCode!=null){
								copyText+='\n尾箱垫编号: '+order.tailCode;
							}
							copyText+="\n备注："+nullConvert(order.descrn); 
						}
					});  
					return copyText;
				},
				afterCopy : function() {
					showAlert("复制成功");
				}
			});
		}
	}
	
	function nullConvert(value){
		if(value==null)
			return "";
		return value;
	}
</script>